<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="标题"  left-arrow @click-left="$router.back()">
        <template #right>
          <van-icon name="share" />
          <van-cell @click="showShare = true" />
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <ul>
        <li v-for="item in list" :key="item.id">
          <img style="width:100%;height:300px" :src="item.image" alt />
          <div>
            <p>{{item.name}}</p>
            <p>{{item.price}}</p>
          </div>
        </li>
      </ul>
      <van-action-bar>
        <van-action-bar-icon icon="wap-home-o" text="首页" color="#ee0a24" />
         <van-action-bar-icon icon="chat-o" text="客服" color="#ff5000" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([
  {
    id: 1,
    image: require("../../assets/tu1.jpg"),
    name: "华陵空调 新一级能效 变评率冷暖 升级款",
    price: "￥1799"
  }
]);
const showShare = ref(false);
const options = [{ name: "微信", icon: "wechat" }];
</script>